<script setup>
import {useMemberStore} from '../../stores/modules/member.js'
import {onShow} from '@dcloudio/uni-app'
import {ref} from 'vue'
const memberStore = useMemberStore()
const {profile} = memberStore
let userInfo = ref()
onShow(()=>{
	userInfo.value = profile
})
const goLogin = ()=>{
	uni.navigateTo({
		url:'/pages/login/login'
	})
}
const goSetting = ()=>{
	uni.navigateTo({
		url:'/pagesSetting/settings/settings'
	})
}
const showMoreOrders = ()=>{
	uni.navigateTo({
		url:'/pagesPay/list/list'
	})
}
</script>

<template>
	<image src="/static/images/banner.jpg" class="custom-nav"></image>
	<view class="my">
		<view class="userInfo">
			<view class="l"  @click="goLogin" v-if="!userInfo.token">
				<image src="/static/userAva.png" class="img"></image>
				<div class="login">
					<view class="txt1">未登录</view>
					<view class="txt2">点击授权登录</view>
				</div>
			</view>
			<template v-else>
				<view class="l" >
					<image :src="userInfo.userInfo.headimgurl" class="img"></image>
					<div class="name">
						{{userInfo.userInfo.nickname}}
					</div>
				</view>
				<view class="r" @click="goSetting">
					设置
				</view>
			</template>			
		</view>
		<uni-card title="我的订单"
		 extra="查看更多" 
		 :is-shadow="false" 
		 :border="false" 
		 class="uni-card1"
		 @click="showMoreOrders"
		 >
			<view class="my-order">
				<navigator :url="userInfo.token?'/order/list/list':'/pages/login/login'"
				 class="order-item"
				 v-for="(item,index) in ['商品订单','礼品卡订单','退款/售后']"
				 v-bind:key="index"
				 >{{item}}</navigator>
			</view>
		</uni-card>
		<uni-card title="关于售前售后服务" :is-shadow="false" :border="false" class="uni-card2" >
			<view>手动阀建设大街冯老师</view>
			<view>手动阀建设大街冯老师</view>
			<view>手动阀建设大街冯老师</view>
			<view>手动阀建设大街冯老师</view>
		</uni-card>	
		<view class="support">
			黄淮科技有限公司提供技术支持
		</view>
	</view>
</template>

<style lang="scss" scoped>
:deep(.uni-card__header){
	border-bottom: none !important;
}
.custom-nav{
	height: 360rpx;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
}
.my{
	padding-top: 260rpx;
	.userInfo{
		margin: 20rpx 30rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		padding: 36rpx;
		border-radius: 40rpx;
		justify-content: space-between;
		align-items: center;
		.l{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.img{
				width: 80rpx;
				height: 80rpx;
				margin-right: 14rpx;
				border-radius: 50%;
			}
			.login{
				.txt1,.txt2{
					color: #8b8b8b;
				}
				.txt1{
					font-size: 28rpx;
				}
				.txt2{
					font-size: 24rpx;
				}
			}
		}
		.r{
			color: #8b8b8b;
		}
	}
	.uni-card1{
		.my-order{
			display: flex;
			flex-direction: row;	
			justify-content: space-between;
			.order-item{
				height: 100%;
				line-height: 100%;
			}
		}
	}
	.support{
		font-size: 26rpx;
		color: #acacac;
		text-align: center;
		margin-top: 20rpx;
	}
}
</style>
